<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Unblurred Overlapping Datapoints with heatmap.js</title>
    <style>
      body, html, h2 { margin:0; padding:0; height:100%;}
      body { font-family:sans-serif; }
      body * { font-weight:200;}
      #heatmapContainerWrapper { width:100%; height:100%; position:absolute; background:rgba(0,0,0,.1); }
      #heatmapContainer { width:100%; height:100%;}
      #heatmapLegend { background:white; position:absolute; bottom:0; right:0; padding:10px; }
      #min { float:left; }
      #max { float:right; }
      h1 { position:absolute; background:black; color:white; padding:10px;}
      #all-examples-info { position:absolute; background:white; font-size:16px; padding:20px; top:100px; width:350px; line-height:150%; }
    </style>
  </head>
  <body>
    <div id="heatmapContainerWrapper">
      <div id="heatmapContainer">

      </div>
    </div>
        <h1>Unblurred Overlapping Datapoints with heatmap.js</h1>
        <div id="all-examples-info">
          <strong style="font-weight:bold;line-height:200%;font-size:18px;">Looking for more examples?</strong> <br />Check out the full <a href="http://www.patrick-wied.at/static/heatmapjs/examples.html?utm_source=gh_local" target="_blank">list of all heatmap.js examples</a> with more pointers &amp; inline documentation.
        </div>
    <script src="/build/heatmap.js"></script>
    <script>
      window.onload = function() {
        // helper function
        function $(id) {
          return document.getElementById(id);
        };

        
        // create a heatmap instance
        var heatmap = h337.create({
          container: document.getElementById('heatmapContainer'),
          opacity:.7,
          radius: 10,
          // this line makes datapoints unblurred
          blur: 0
        });

        // boundaries for data generation
        var width = (+window.getComputedStyle(document.body).width.replace(/px/,''));
        var height = (+window.getComputedStyle(document.body).height.replace(/px/,''));

        // generate 1000 datapoints
        var generate = function() {
          // randomly generate extremas
          var extremas = [(Math.random() * 100) >> 0,(Math.random() * 100) >> 0];
          var max = Math.max.apply(Math, extremas);
          var min = Math.min.apply(Math,extremas);
          var t = [];


          for (var i = 0; i < 400; i++) {
            var x = (Math.random()* width) >> 0;
            var y = (Math.random()* height) >> 0;
            var c = ((Math.random()* max-min) >> 0) + min;
            // btw, we can set a radius on a point basis
            var r = 40; //(Math.random()* 30) >> 0;
            // add to dataset
            t.push({ x: x, y:y, value: c, radius: r });
          }
          var init = +new Date;
          // set the generated dataset
          heatmap.setData({
            min: min,
            max: max,
            data: t
          });
          console.log('took ', (+new Date) - init, 'ms');
        };
        // initial generate
        generate();

        // whenever a user clicks on the ContainerWrapper the data will be regenerated -> new max & min
        document.getElementById('heatmapContainerWrapper').onclick = function() { generate(); };

      };
    </script>
  </body>
</html>